<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script src="/js/jq.js"></script>

  <style type="text/css">
    * {
      margin: 0px;
      padding: 0px;
    }

    table {
      width: 1000px;
      border: 1px solid red;
      margin: 0px auto;
      border-collapse: collapse;
      text-align: center;
    }

    td,
    th {
      border: 1px solid red;
      height: 40px;
    }

    /* 对话框的样式设置 */
    /*遮罩层  */

    #mask {
      background-color: gray;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 100;
      opacity: 0.3;
      filter: alpha(opacity=30);
    }

    /*对话框整体布局  */

    #dialog {
      background-color: #fff;
      border: 3px solid orange;
      height: 200px;
      position: absolute;
      width: 300px;
      z-index: 101;
      display: none;
      position: absolute;
      left: 600px;
      top: 300px;
    }

    /*对话框头部背景  */

    #dialog div#title {
      background: #cccccc;
      overflow: hidden;
    }

    /*对话框头部中的关闭按钮布局  */

    #dialog p.close {

      float: right;
      padding-right: 10px;
      height: 24px;
      line-height: 24px;
      width: 40px;
      cursor: pointer;
      color: red;
    }

    /* 对话框中提示部分的布局 */

    #dialog div#infor {
      text-align: center;
      height: 80px;
      line-height: 80px;
    }

    /*对话框中确认按钮的布局  */

    #dialog div#sure {
      text-align: center;
      height: 30px;
      line-height: 30px;
    }

    /* 商品图片大小 */

    table img {
      width: 90px;
      height: 80px;
    }

    /* 结账按钮 */

    #buyAll {
      width: 120px;
      height: 50px;
      color: red;
      font-size: 30px;
    }

    table a {
      text-decoration: none;
      color: red;
    }

    table a :HOVER {
      color: blue;
    }

    .newClass {
      border: 5px solid yellow;
    }

    #menuDiv {
      height: 100px;
      margin: 0 auto;
      width: 800px;
    }

    #menuDiv a {
      text-decoration: none;
      color: black;
    }

    #menuDiv a:HOVER {
      color: orange;
    }

    #menuDiv ul {
      list-style: none;
      position: absolute;
    }

    #menuDiv ul li {
      width: 100px;
      height: 40px;
      line-height: 40px;
      float: left;
      border: 1px solid red;
      text-align: center;
      position: relative;
    }

    #menuDiv li.menuList ul {
      display: none;
    }

    caption {
      color: black;
      font-size: 30px;
      margin-bottom: 10px;
    }

    button {
      width: 90px;
      height: 30px;
      border-width: 0px;
      border-radius: 3px;
      background: #1E90FF;
      cursor: pointer;
      outline: none;
      font-family: Microsoft YaHei;
      color: white;
      font-size: 17px;
    }

    button:HOVER {
      background: #5599FF;
    }

    .f {
      position: absolute;
      display: none;
    }
  </style>

</head>

<body>
  <div id="menuDiv">
    <ul>
      <li><a href="#">首页 <ul class="f">
            <li>首页</li>
          </ul></a></li>
      <li><a href="#">家纺家居<ul class="f">
            <li>首页</li>
          </ul></a></li>
      <li><a href="#">智能家电<ul class="f">
            <li>首页</li>
          </ul></a></li>
      <li><a href="#">手机电脑<ul class="f">
            <li>首页</li>
          </ul></a></li>
      <li><a href="#">食品生鲜<ul class="f">
            <li>首页</li>
          </ul></a></li>
    </ul>
  </div>

  <table id="goods">
    <caption>双十一选购会</caption>
    <tr>
      <th>编号</th>
      <th>图片</th>
      <th>商品名称</th>
      <th>折扣价(￥)</th>
      <th>抢抢抢！</th>
    </tr>
    <tr>
      <td>1001</td>
      <td><img src="../imgs/goods1.png"></img>
      </td>
      <td>闪迪64G存储卡行车记录仪</td>
      <td>74</td>
      <td><a href="#">加入购物车</a>
      </td>
    </tr>
    <tr>
      <td>1002</td>
      <td><img src="../imgs/goods2.png"></img>
      </td>
      <td>天际隔水电炖锅</td>
      <td>119</td>
      <td><a href="#">加入购物车</a>
      </td>
    </tr>
    <tr>
      <td>1003</td>
      <td><img src="../imgs/goods3.png"></img>
      </td>
      <td>创维55寸大屏电视</td>
      <td>3699</td>
      <td><a href="#">加入购物车</a>
      </td>
    </tr>
    <tr>
      <td>1004</td>
      <td><img src="../imgs/goods4.png"></img>
      </td>
      <td>美玲电冰箱</td>
      <td>2999</td>
      <td><a href="#">加入购物车</a>
      </td>
    </tr>
    <tr>
      <td>1005</td>
      <td><img src="../imgs/goods5.png"></img>
      </td>
      <td>大疆MAVICPRO无人机</td>
      <td>3000</td>
      <td><a href="#">加入购物车</a>
      </td>
    </tr>
  </table>
  <table id="carsTable" style="margin-top: 90px">
    <caption>购物车</caption>
    <thead>
      <tr>
        <th><input type="checkbox" />全选</th>
        <th>图片</th>
        <th>名称</th>
        <th>数量</th>
        <th>价格</th>
        <th>小计</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody id="cart">
    </tbody>
    <tfoot>
      <tr>
        <td colspan="6">数量是：<span id="allNum">0</span>个 价格是：￥<span id="allMoney">0</span>元</td>
        <td colspan="1"><button id="dellAll">批量删除</button></td>
      </tr>
    </tfoot>
  </table>
  <script>
    $(function () {
      //获取a标签
      var $li = $("#menuDiv>ul>li>a");
      //给li注册鼠标经过事件，让自己的ul显示出来
      $li.mouseenter(function () {
        //找到所有的儿子，并且还得是ul
        $(this).children("ul").stop().slideDown(200);
      });

      $li.mouseleave(function () {
        $(this).children("ul").stop().slideUp(200);
      });
    })
    $(function () {
      //获取购物车标签#goods tr td a
      $('#goods tr td a').click(function () {
        //获取a标签父亲的第二个兄弟的文本——图片
        var tup = $(this).parent().siblings().eq(1).html();
        //获取a标签父亲的第二个兄弟的文本——商品名称
        var name = $(this).parent().parent().children().eq(2).html();
        //获取a标签父亲的第二个兄弟的文本——折扣价
        var jin = $(this).parent().siblings().eq(3).html();
        //判重判断商品在购物车里是否存在
        var flag = true;
        $('#cart tr').each(function () {
          //判断name在新添加的name是否一致
          if ($(this).children().eq(2).text() == name) {
            //已经存在
            flag = false;
            //更新原来的数量和小计
            var num = parseFloat($(this).children().eq(3).text());
            var ji = parseFloat($(this).children().eq(5).text());
            $(this).children().eq(3).text(num + 1);
            $(this).children().eq(5).text((num + 1) * jin);
          }
        });
        //创建7个单元格
        if (flag) {
          var t1 = "<td><input type='checkbox'></td>";
          var tp = "<td>" + tup + "</td>";
          var mc = "<td>" + name + "</td>";
          var shu = "<td>" + 1 + "</td>"
          var jg = "<td>" + jin + "</td>"
          var xj = "<td>" + jin + "</td>"
          var sc = "<td><a href='#'>删除</a></td>"
          var tr = "<tr>" + t1 + "" + tp + "" + mc + "" + shu + "" + jg + "" + xj + "" + sc + "</tr>"
          $("#cart").append(tr);
        }
        //增加总计
        var num = 0;
        var sum = 0;
        $("#cart tr").each(function () {
          num += parseFloat($(this).children().eq(3).text());
          sum += parseFloat($(this).children().eq(5).text());
        });
        $("#allNum").text(num);
        $("#allMoney").text(sum);

      });
      //全选
      $('#carsTable input[type="checkbox"]').click(function () {
        //attr,prop
        if ($(this).prop('checked')) {
          $('#cart input[type="checkbox"]').each(function () {
            $(this).prop('checked', true)
          });
        } else {
          $('#cart input[type="checkbox"]').each(function () {
            $(this.prop('checked', false))
          });
        }
      })
      //反选
      $("#cart").on("click", "input[type='checkbox']", function () {
        var flag = true;
        $("#cart input[type='checkbox']").each(function () {
          if ($(this).prop("checked") == false) {
            $("#carsTable thead input[type='checkbox']").prop("checked", false);
            flag = false;
          }
        });
        if (flag) {
          $("#carsTable thead input[type='checkbox']").prop("checked", true);
        }
      })
      //删除
      $('#carsTable').on("click", "a", function () {
        $(this).parent().parent().remove();
        zz();
      });
      //批量删除
      $('#dellAll').click(function () {
        $("#cart input[type='checkbox']").each(function () {
          if ($(this).prop('checked') == true) {
            $(this).parent().parent().remove();
            zz();
          };
        });
      });
    });
  </script>
</body>

</html>

```javascript
在这里插入代码片